<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">权限管理</a></li>
        <li class="active">角色管理</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs jax-nav-tabs">
            <li class="active"><a class="jax-tab-a" href="#tab-content1" data-toggle="tab" onclick="roleList(1)">角色列表</a></li>
            <li class="danger"><a class="jax-tab-a" href="#rubbish" data-toggle="tab" onclick="roleList(2)">回收站</a></li>
        </ul>
        <div class="tab-content">
            <!-- Font Awesome Icons -->
            <div class="tab-pane jax-table active" id="tab-content1">
                <div id="toolbar" class="btn-group">
                    <shiro:hasPermission name="/role/add">
                    <button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal" data-target="#roleModal">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                    </button>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="/role/edit">
                    <button id="btn_edit" type="button" class="btn btn-success">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                    </button>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="/role/delete">
                    <button id="btn_delete" type="button" class="btn btn-danger">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                    </button>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="/role/detail">
                    <button id="btn_detail" type="button" class="btn btn-info">
                        <span class="fa fa-info" aria-hidden="true"></span>详情
                    </button>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="/role/assign/permission">
                        <button id="btn_assign_permission" type="button" class="btn btn-warning">
                            <span class="fa fa-arrow-right" aria-hidden="true"></span>分配权限
                        </button>
                    </shiro:hasPermission>
                </div>
                <table id="table"></table>
            </div>
            <div class="tab-pane jax-table" id="rubbish">
                <div id="rubbishToolbar" class="btn-group">
                    <shiro:hasPermission name="/role/reuse">
                        <button id="btn_reuse" type="button" class="btn btn-success">
                            <span class="fa fa-reply" aria-hidden="true"></span>启用
                        </button>
                    </shiro:hasPermission>
                </div>
                <table id="rubbish-table">
                </table>
            </div>
        </div>
    </div>
</section>
<!-- 角色模态框 -->
<div id="roleModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">新增角色</h4>
            </div>
            <div class="modal-body">
                <div>
                    <form class="form-horizontal" id="roleForm" method = 'post' th:action="@{/role/add}">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="name" class="col-sm-3 control-label">角色名称 :</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="name" id="name" require="必填项"  placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="description" class="col-sm-3 control-label">角色描述 :</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="description" id="description" placeholder="">
                                </div>
                            </div>

                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <div class="pull-right">
                                <button type="button" id="saveRole" class="btn btn-info">确定</button>
                                <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                            </div>
                        </div>
                        <!-- /.box-footer -->
                    </form>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<!-- 角色模态框 -->
<div id="roleDetailModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">角色信息</h4>
            </div>
            <div class="modal-body">
                <div id="roleOpenWindow">
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<!-- 分配权限 -->
<div id="assignPermissionModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">分配权限</h4>
            </div>
            <div class="modal-body">
                <ul id="permissionTree" class="ztree"></ul>
            </div>
            <div class="modal-footer">
                <div class="pull-right">
                    <button type="button" id="saveAssign" class="btn btn-info">确定</button>
                    <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<script>
    var roleIdChecked="";
    var roleStatus=1;//1正常，2删除
    var roleIdStr;//批量
    var loadRoleDelCount=0;
    var columns=[
        {checkbox: true },
        {
            field: 'roleId',
            title: '角色ID',
            align : "center"
        }, {
            field: 'name',
            title: '角色名称',
            align : "center"
        }, {
            field: 'description',
            title: '角色描述',
            align : "center"
        },
        {
            field: 'status',
            title: '角色状态',
            align : "center",
            formatter:function(value,row, index){
                return row.status == '1' ? "有效" : "删除";
            }
        }];
    var options={
        id:"#table",
        url: '/role/list',
        columns:columns,
        toolbar: '#toolbar',
        showRefresh: true,
        queryParams : queryParams
    }
    Core.initTable(options);

    $(function () {
        $("#btn_add").click(function(){
            Core.clearError("#roleForm");
        });
        //修改
        $("#btn_edit").click(function(){
            var result = Core.selectSingleData("#table");
            if(result != false){
                Core.load("#roleOpenWindow","/role/detail?opertype=edit&id="+result.id, function(){
                    $("#roleDetailModal").modal("show");
                });
            }
        });
        //详情
        $("#btn_detail").click(function(){
            var result = Core.selectSingleData("#table");
            if(result != false){
                Core.load("#roleOpenWindow","/role/detail?opertype=detail&id="+result.id, function(){
                    $("#roleDetailModal").modal("show");
                });
            }
        });
        //删除
        $("#btn_delete").click(function(){
            var checkedRows= Core.selectMutiData("#table");
            if(checkedRows!=false){
                roleIdStr="";
                $.each(checkedRows, function (i, item) {
                    roleIdStr+=(item.roleId+",");
                })
                roleIdStr=roleIdStr.substring(0,roleIdStr.length-1);
                Core.postAjax("/role/delete",{"roleIdStr":roleIdStr},function(data){
                    if(data.status=="success"){
                        layer.msg("删除成功！");
                        Core.refreshTable("#table");
                    }else{
                        layer.msg(data.msg);
                    }
                },"get")
            }
        });
        /*启用*/
        $("#btn_reuse").click(function(){
            var checkedRows= Core.selectMutiData("#rubbish-table");
            if(checkedRows!=false){
                roleIdStr="";
                $.each(checkedRows, function (i, item) {
                    roleIdStr+=(item.roleId+",");
                })
                roleIdStr=roleIdStr.substring(0,roleIdStr.length-1);
                Core.postAjax("/role/reuse",{"roleIdStr":roleIdStr},function(data){
                    if(data.status=="success"){
                        layer.msg("启用成功！");
                        Core.refreshTable("#rubbish-table");
                    }else{
                        layer.msg(data.msg);
                    }
                },"get")
            }
        });
        //树-初始化设置
        var treeSetting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId"
                }
            }
        };
        /*分配权限*/
        $("#btn_assign_permission").click(function() {
            var result = Core.selectSingleData("#table");
            if (result) {
                //选中的角色id
                roleIdChecked=result.roleId;
                Core.postAjax("/role/assign/permission/list",{"roleId":roleIdChecked},function(data){
                    var zNodes=data;
                    $.fn.zTree.init($("#permissionTree"), treeSetting, zNodes);
                    $("#assignPermissionModal").modal("show");
                })
            }
        });
        //新增-保存
        $("#saveRole").click(function(){
            if(doValidForm(roleForm)){
                Core.mask("#saveRole");
                Core.postAjax("/role/add",$("#roleForm").serialize(),function (data) {
                    Core.unmask("#saveRole");
                    if(data.status=="success"){
                        layer.msg("保存成功！");
                        $("#roleModal").modal("hide");
                        $("#roleForm")[0].reset();
                        Core.refreshTable("#table")
                    }else{
                        layer.msg(data.msg);
                    }
                })
            };
        });
        /*保存分配*/
        $("#saveAssign").click(function () {
            Core.mask("#saveAssign")
            var permissionIdStr="";
            var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
            var nodes = treeObj.getCheckedNodes(true);
            for(var i=0;i<nodes.length;i++){
                if(i==(nodes.length-1)){
                    permissionIdStr+=nodes[i].permissionId;
                }else{
                    permissionIdStr+=nodes[i].permissionId+",";
                }
            }
            Core.postAjax( '/role/assign/permission',{roleId:roleIdChecked,permissionIdStr:permissionIdStr},function (data) {
                Core.unmask("#saveAssign");
                if(data.status=="success"){
                    layer.msg("分配成功！");
                    $("#assignPermissionModal").modal("hide");
                }else{
                    layer.msg(data.msg);
                }
            });
        });
    });
    //查询参数
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit : params.limit, //页面大小
            offset : params.offset, //页码
            status : roleStatus
        };
        return temp;
    }

    function roleList(status) {
        roleStatus=status;
        if(roleStatus==1){
            Core.refreshTable("#table");
        }else if(roleStatus==2){
            if(loadRoleDelCount==0){
                var options={
                    id:"#rubbish-table",
                    url: '/role/list',
                    columns:columns,
                    toolbar: '#rubbishToolbar',
                    showRefresh: true,
                    queryParams : queryParams,
                    onLoadSuccess: function(){  //加载成功时执行
                        loadRoleDelCount=1;
                    }
                }
                Core.initTable(options);
            }else{
                Core.refreshTable("#rubbish-table");
            }
        }
    }
</script>